

  <div class="cotainer " >
    <header>
      <a class="nav-title active "  (click)="change(0);">设备监控</a>
      <a class="nav-title" (click)="change(1);">服务参数</a>
      <a class="nav-title" (click)="change(2);">故障参数</a>
      <a class="nav-title" (click)="change(3);">历史数据</a>
      <a class="nav-title" (click)="change(4);">报警</a>
      <a class="nav-title" (click)="change(5);">能效分析</a>
    </header>
  </div>

  <div class="content-box xx-box" id="realtime" >
    <div class="content-box-child">
      <div class="content-box-title">实时状态</div>
      <div class="charts-box">
        <div class="charts-child" >
          <div id="angular-gauge1" style="min-width: 150px; max-width: 200px; height: 200px; margin: 0 auto">
          </div>
          <div class="charts-child-txt"><span >供气压力</span></div>
        </div>
        <div class="charts-child" >
          <div id="angular-gauge2" style="min-width: 150px; max-width: 200px; height: 200px; margin: 0 auto">
          </div>
          <div class="charts-child-txt"><span >排气温度</span></div>
        </div>
        <div class="charts-child" >
          <div id="angular-gauge3" style="min-width: 150px; max-width: 200px; height: 200px; margin: 0 auto">
          </div>
          <div class="charts-child-txt"><span >主机A项电流</span></div>
        </div>
        <div class="charts-child">
          <div class="charts-child-time">
            <span class="charts-child-time-left">运行时间</span>
            <span id="ScrewMachine_State_3">--</span>
            <span>H</span>
          </div>
          <div class="charts-child-time">
            <span class="charts-child-time-left">加载时间</span>
            <span id="ScrewMachine_State_4">--</span>
            <span>H</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box-child">
      <div class="trouble-box">
                <span class="trouble-child-box">
                    <span class="trouble-child-left" id="ScrewMachine_State_12">运行</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_121"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left" id="ScrewMachine_State_11">加载</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_111"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">空久停机</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_21"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">供气压力高</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_20"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">预警</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_23"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">报警</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_22"></span>
                </span>
      </div>
    </div>
    <div class="content-box-child">
      <div class="content-box-title">实时故障状态</div>
      <div class="trouble-box">
                <span class="trouble-child-box">
                    <span class="trouble-child-left">风机电流故障</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_19"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">油滤器堵塞</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_18"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">油分器堵塞</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_17"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">空滤器堵塞</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_16"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">主电机电流故障</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_15"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">相序错误</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_14"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">排气温度高</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_13"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">供气压力传感器失灵</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_32"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">排气温度传感器失灵</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_31"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">缺水</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_30"></span>
                </span>
                <span class="trouble-child-box">
                    <span class="trouble-child-left">排气温度高预警</span>
                <span class="trouble-child-right gray" id="ScrewMachine_State_29"></span>
                </span>
      </div>
    </div>
  </div>


  <div  class="info-box xx-box" id="sevinfo" style="display: none;">
    <div class="info-box-child left">
      <table class="table table-striped">
        <caption>服务参数</caption>
        <thead>
        <tr>
          <th>#</th>
          <th>参数</th>
          <th>值</th>
          <th>单位</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>油滤器使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_6">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>2</td>
          <td>油分器使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_7">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>3</td>
          <td>空滤器使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_8">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>4</td>
          <td>润滑油使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_9">--</td>
          <td>小时</td>
        </tr>
        <tr>
          <td>5</td>
          <td>润滑脂使用时间</td>
          <td class="tdcls" id="ScrewMachine_State_10">--</td>
          <td>小时</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="info-box-child right">
      <table class="table table-striped">
        <caption>&nbsp;&nbsp;</caption>
        <thead>
        <tr>
          <th>#</th>
          <th>服务参数报警</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>油滤器使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_28"></span></td>
        </tr>
        <tr>
          <td>2</td>
          <td>油分器使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_27"></span></td>
        </tr>
        <tr>
          <td>3</td>
          <td>空滤器使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_26"></span></td>
        </tr>
        <tr>
          <td>4</td>
          <td>润滑油使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_25"></span></td>
        </tr>
        <tr>
          <td>5</td>
          <td>润滑脂使用时间到</td>
          <td class="warn-box"><span class="gray-box" id="ScrewMachine_State_24"></span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
